Estoy haciendo una entrada de selección en mi aplicación nativa de reacción usando import "react-native-form-select-picker", y el código funciona bien, pero me da una advertencia como "Encontré dos niños con la misma clave, `. $1/.$2". Entonces, ¿cómo puedo solucionar este problema? ¿Puede alguien ayudarme? A continuación se muestran mis líneas de código:
import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native'; import SelectPicker from 'react-native-form-select-picker'; const options = ["Aadhar Card", "Bank Passbook", "Driving Licence", "Pan Card"]; // create a component const UpdateDocument = ({ navigation }) => { const [selected, setSelected] = useState(); return ( <View style={styles.container}> <View style={styles.docBox}> <SelectPicker placeholder="Select document to Update" style={styles.selectBox} onValueChange={(value) => { // Do anything you want with the value. // For example, save in state. setSelected(value); }} selected={selected} > {Object.values(options).map((val, index) => ( <SelectPicker.Item label={val} value={val} key={} /> ))} </SelectPicker> </View> </View> ); }; // define your styles const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, docBox: { paddingVertical: 10, paddingHorizontal: 10, borderBottomColor: '#aaa', borderBottomWidth: 1, }, selectBox: { borderColor: '#555', borderWidth: 1, borderRadius: 4, } }); //make this component available to the app export default UpdateDocument;Las teclas ayudan a React a identificar qué elementos han cambiado, se agregaron o se eliminaron. Es por eso que React quiere que agregue claves únicas a cada elemento cada vez que itera sobre una lista de objetos para representar múltiples elementos JSX. Si omite las claves, los elementos no obtienen identidades estables dentro de la lista y React le gritará en la consola: Advertencia: cada niño en una lista debe tener una "clave" única.
Entonces, si cada una de sus opciones en la lista de opciones es única, lo que solo tendría sentido, entonces puede hacer esto.
{Object.values(options).map((val, index) => ( <SelectPicker.Item label={val} value={val} key={val} /> ))}